<template>
    <div style="display: flex;width: 100%;height: 100vh; background-color: black;">
        <!-- 左边 -->
        <div style="width: 50%;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <W网页和代码基础 :代码="代码" :访问路径="访问路径" :组件名="组件名" />
        </div>
        <!-- 右边 -->
        <div style="width: 50%;background-color: rgba(25, 8, 36, 0.521);color: aliceblue; min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 180px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="组件修改">刷新组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮 -->
                    <div :style='样式1'>
                        <h4>对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮 : </h4>
                        <spen :style='样式2'>英:type,类型:string,默认:selection / index / expand</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.type'
                            size='small'>
                            <el-radio label="selection">是 </el-radio>
                            <el-radio label="index">序号 </el-radio>
                            <el-radio label="expand">展开 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 如果设置了 type=index，可以通过传递 index 属性来自定义索引 -->
                    <div :style='样式1'>
                        <h4>如果设置了 type=index，可以通过传递 index 属性来自定义索引 : </h4>
                        <spen :style='样式2'>英:index,类型:number / function(index),默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.index'
                            size='small'>
                            <el-radio label="1">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 显示的标题 -->
                    <div :style='样式1'>
                        <h4>显示的标题 : </h4>
                        <spen :style='样式2'>英:label,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.label'
                            size='small'>
                            <el-radio label="我是标题">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- column 的 key， column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 -->
                    <div :style='样式1'>
                        <h4>column 的 key， column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 : </h4>
                        <spen :style='样式2'>英:column_key,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.column_key'
                            size='small'>
                            <el-radio label="我是column_key">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 字段名称 对应列内容的字段名， 也可以使用 property属性 -->
                    <div :style='样式1'>
                        <h4>字段名称 对应列内容的字段名， 也可以使用 property属性 : </h4>
                        <spen :style='样式2'>英:prop,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.prop'
                            size='small'>
                            <el-radio label="date">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 对应列的宽度 -->
                    <div :style='样式1'>
                        <h4>对应列的宽度 : </h4>
                        <spen :style='样式2'>英:width,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.width'
                            size='small'>
                            <el-radio label="100px">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 -->
                    <div :style='样式1'>
                        <h4>对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 : </h4>
                        <spen :style='样式2'>英:min_width,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.min_width'
                            size='small'>
                            <el-radio label="50px">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 列是否固定在左侧或者右侧。 true 表示固定在左侧 -->
                    <div :style='样式1'>
                        <h4>列是否固定在左侧或者右侧。 true 表示固定在左侧 : </h4>
                        <spen :style='样式2'>英:fixed,类型:string / boolean,默认:true / 'left' / 'right'</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.fixed'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="left">左侧 </el-radio>
                            <el-radio label="right">右侧 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 列标题 Label 区域渲染使用的 Function -->
                    <div :style='样式1'>
                        <h4>列标题 Label 区域渲染使用的 Function : </h4>
                        <spen :style='样式2'>英:render_header,类型:function({ column, $index }),默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.render_header'
                            size='small'></el-radio-group></div>
                    <!-- 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 -->
                    <div :style='样式1'>
                        <h4>对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 : </h4>
                        <spen :style='样式2'>英:sortable,类型:boolean / string,默认:custom</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.sortable'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 指定数据按照哪个属性进行排序，仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Number -->
                    <div :style='样式1'>
                        <h4>指定数据按照哪个属性进行排序，仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Number : </h4>
                        <spen :style='样式2'>英:sort_method,类型:function(a, b),默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.sort_method'
                            size='small'>
                            <el-radio label="排序方法">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 -->
                    <div :style='样式1'>
                        <h4>指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1
                            个相等，再按照第 2 个排序，以此类推 : </h4>
                        <spen :style='样式2'>英:sort_by,类型:function(row, index) / string / array,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.sort_by'
                            size='small'></el-radio-group></div>
                    <!-- 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 -->
                    <div :style='样式1'>
                        <h4>数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 : </h4>
                        <spen :style='样式2'>英:sort_orders,类型:array,默认:数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null
                            表示还原为原始顺序</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.sort_orders'
                            size='small'></el-radio-group></div>
                    <!-- 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） -->
                    <div :style='样式1'>
                        <h4>对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） : </h4>
                        <spen :style='样式2'>英:resizable,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.resizable'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 用来格式化内容 -->
                    <div :style='样式1'>
                        <h4>用来格式化内容 : </h4>
                        <spen :style='样式2'>英:formatter,类型:function(row, column, cellValue, index),默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.formatter'
                            size='small'></el-radio-group></div>
                    <!-- 当内容过长被隐藏时显示 tooltip -->
                    <div :style='样式1'>
                        <h4>当内容过长被隐藏时显示 tooltip : </h4>
                        <spen :style='样式2'>英:show_overflow_tooltip,类型:boolean \,默认:object 2.2.28</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.show_overflow_tooltip'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 对齐方式 -->
                    <div :style='样式1'>
                        <h4>对齐方式 : </h4>
                        <spen :style='样式2'>英:align,类型:string,默认:left / center / right</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.align'
                            size='small'>                            <el-radio label="true">是 </el-radio>
                            <el-radio label="left">靠左 </el-radio>
                            <el-radio label="center">居中 </el-radio>
                            <el-radio label="right">靠右 </el-radio>
                            <el-radio label="">无</el-radio>
                        
                        </el-radio-group></div>
                    <!-- 表头对齐方式， 若不设置该项，则使用表格的对齐方式 -->
                    <div :style='样式1'>
                        <h4>表头对齐方式， 若不设置该项，则使用表格的对齐方式 : </h4>
                        <spen :style='样式2'>英:header_align,类型:string,默认:left / center / right</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.header_align'
                            size='small'>
                            <el-radio label="left">靠左 </el-radio>
                            <el-radio label="center">居中 </el-radio>
                            <el-radio label="right">靠右 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 列的 className -->
                    <div :style='样式1'>
                        <h4>列的 className : </h4>
                        <spen :style='样式2'>英:class_name,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.class_name'
                            size='small'></el-radio-group></div>
                    <!-- 当前列标题的自定义类名 -->
                    <div :style='样式1'>
                        <h4>当前列标题的自定义类名 : </h4>
                        <spen :style='样式2'>英:label_class_name,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.label_class_name'
                            size='small'></el-radio-group></div>
                    <!-- 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 -->
                    <div :style='样式1'>
                        <h4>仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 : </h4>
                        <spen :style='样式2'>英:selectable,类型:function(row, index),默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.selectable'
                            size='small'></el-radio-group></div>
                    <!-- 数据刷新后是否保留选项，仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。 -->
                    <div :style='样式1'>
                        <h4>数据刷新后是否保留选项，仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。 : </h4>
                        <spen :style='样式2'>英:reserve_selection,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.reserve_selection'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。 -->
                    <div :style='样式1'>
                        <h4>数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。 : </h4>
                        <spen :style='样式2'>英:filters,类型:A{text: string, value: string},默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.filters'
                            size='small'></el-radio-group></div>
                    <!-- 过滤弹出框的定位 -->
                    <div :style='样式1'>
                        <h4>过滤弹出框的定位 : </h4>
                        <spen :style='样式2'>英:filter_placement,类型:string,默认:与 Tooltip 的 placement 属性相同</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.filter_placement'
                            size='small'></el-radio-group></div>
                    <!-- 数据过滤的选项是否多选 -->
                    <div :style='样式1'>
                        <h4>数据过滤的选项是否多选 : </h4>
                        <spen :style='样式2'>英:filter_multiple,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.filter_multiple'
                            size='small'></el-radio-group></div>
                    <!-- 数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 -->
                    <div :style='样式1'>
                        <h4>数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 : </h4>
                        <spen :style='样式2'>英:filter_method,类型:function(value, row, column),默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.filter_method'
                            size='small'></el-radio-group></div>
                    <!-- 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 -->
                    <div :style='样式1'>
                        <h4>选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 : </h4>
                        <spen :style='样式2'>英:filtered_value,类型:array,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.filtered_value'
                            size='small'></el-radio-group></div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>
<script setup>
import W网页和代码基础 from "../网页和代码基础.vue"
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 路由 = proxy.router
const 库 = proxy.lib
const API = proxy.API
const 组件名 = ref('表格列')
const 属性 = ref({
    type:'',//对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
    index:'',//如果设置了 type=index，可以通过传递 index 属性来自定义索引
    label:'',//显示的标题
    column_key:'',//column 的 key， column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件
    prop:'',//字段名称 对应列内容的字段名， 也可以使用 property属性
    width:'',//对应列的宽度
    min_width:'',//对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
    fixed:'',//列是否固定在左侧或者右侧。 true 表示固定在左侧
    render_header:'',//列标题 Label 区域渲染使用的 Function
    sortable:'',//对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件
    sort_method:'',//指定数据按照哪个属性进行排序，仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Number
    sort_by:'',//指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推
    sort_orders:'',//数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序
    resizable:'',//对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）
    formatter:'',//用来格式化内容
    show_overflow_tooltip:'',//当内容过长被隐藏时显示 tooltip
    align:'',//对齐方式
    header_align:'',//表头对齐方式， 若不设置该项，则使用表格的对齐方式
    class_name:'',//列的 className
    label_class_name:'',//当前列标题的自定义类名
    selectable:'',//仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
    reserve_selection:'',//数据刷新后是否保留选项，仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。
    filters:'',//数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
    filter_placement:'',//过滤弹出框的定位
    filter_multiple:'',//数据过滤的选项是否多选
    filter_method:'',//数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
    filtered_value:'',//选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。
})

const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 10px;font-size: 14px;')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')



const 代码 = ref('')
const 访问路径 = ref('http://localhost:3000/#/gotablecolumn')

const 组件修改 = async () => {
	访问路径.value = ""
    let 结果 = await API.组件修改(组件名.value, 属性.value, "", "")
    if (结果.err == 'ok') {
        代码.value = 结果.msg
        访问路径.value = 结果.url
        console.log("访问路径", 访问路径.value)
        ElMessage.success("修改成功")
    } else {
        访问路径.value = 结果.url
        ElMessage.error("错误:" + 结果.err)
    }

}

</script>
<style lang="scss"  scoped>
h4 {
    background-color: rgb(65, 104, 75);
    text-align: center;
}</style>
